<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-col :span="23">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item
            :rules="[{ required: true, message: '请输入'}]"
            label="名称"
            prop="Name"
          >
            <el-input v-model="form.Name" />
          </el-form-item>
          <el-form-item
            :rules="[{ required: true, message: '请输入'}]"
            label="编号"
            prop="Code"
          >
            <el-input v-model="form.Code" />
          </el-form-item>
          <el-form-item
            :rules="[{ required: true, message: '请输入'}]"
            label="展示格式"
            prop="DisplayType"
          >
            <el-select v-model="form.DisplayType">
              <el-option v-for="item in enums.displayTypeEnum" :key="item.value" :label="item.text" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item
            :rules="[{ required: true, message: '请输入'}]"
            label="报表类型"
            prop="Type"
          >
            <el-select v-model="form.Type">
              <el-option v-for="item in enums.reportTypeEnum" :key="item.value" :label="item.text" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="form.Type !== enums.reportTypeEnum.AGGREGATION.value"
            :rules="[{ required: true, message: '请输入'}]"
            label="数据权限支持"
            prop="DataAccessSupport"
          >
            <el-switch v-model="form.DataAccessSupport" />
          </el-form-item>
          <el-form-item
            v-if="form.Type !== enums.reportTypeEnum.AGGREGATION.value"
            :rules="[{ required: true, message: '请输入'}]"
            label="分页支持"
            prop="PageSupport"
          >
            <el-switch v-model="form.PageSupport" />
          </el-form-item>
          <el-form-item
            v-if="form.Type !== enums.reportTypeEnum.AGGREGATION.value"
            :rules="[{ required: true, message: '请输入'}]"
            label="展示合计"
            prop="ShowSummary"
          >
            <el-switch v-model="form.ShowSummary" />
          </el-form-item>
          <el-form-item v-if="operateType === enums.operateEnum.ADD">
            <el-button type="primary" @click="add">
              保存
            </el-button>
            <el-button @click="close">
              取消
            </el-button>
          </el-form-item>
          <el-form-item v-if="operateType === enums.operateEnum.DETAIL">
            <el-button @click="close">
              取消
            </el-button>
          </el-form-item>
          <el-form-item v-if="operateType === enums.operateEnum.EDIT">
            <el-button type="primary" @click="edit">
              保存
            </el-button>
            <el-button @click="close">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import reportApi from '@/api/report'
import operateEnum from '@/enums/operateEnum'
import reportTypeEnum from '@/enums/report/reportTypeEnum'
import reportDbApi from '@/api/report_db'
import sqlFormatter from 'sql-formatter'
import displayTypeEnum from '@/enums/report/displayTypeEnum'

export default {
  name: 'ReportInfo',
  props: {
    // id
    id: {
      type: String,
      required: false
    },
    // 操作类型, 可用  edit, add
    operateType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 表单数据
      form: {
        Name: '',
        ReportId: this.id,
        Code: '',
        DisplayType: null,
        DataAccessSupport: false,
        PageSupport: false,
        ShowSummary: false,
        Type: reportTypeEnum.SQL.value

      },
      enums: {
        operateEnum,
        displayTypeEnum,
        reportTypeEnum
      },
      DbList: []
    }
  },
  mounted() {
    this.getDbList()
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    beautifulSql() {
      this.form.SqlReport.Sql = sqlFormatter.format(this.form.SqlReport.Sql)
    },
    getDetail() {
      reportApi.getReportDetail(this.id).then(response => {
        if (response.data) {
          var responseData = response.data.reportDetail
          responseData.__typename = undefined
          this.form = responseData
          if (this.form.SqlReport) {
            this.form.SqlReport.__typename = undefined
          }
        } else {
          this.$notify.error(response.errors[0].message)
        }
      }).catch((err) => {
        this.$notify.error(err.message)
      })
    },
    getDbList() {
      reportDbApi.list().then(response => {
        if (response.data.reportDbList) {
          this.DbList = response.data.reportDbList
        }
      }).catch((err) => {
        this.$notify.error(err.message)
      })
    },
    // 保存数据
    add() {
      // 验证表单数据
      this.$refs.form.validate((valid) => {
        if (valid) {
          var postData = {}
          Object.assign(postData, this.form)
          reportApi.addReport(postData).then(response => {
            if (response.data) {
              this.$notify.success('保存成功')
              this.$emit('addComplete')
            } else {
              this.$notify.error(response.errors[0].message)
            }
          }).catch((err) => {
            this.$notify.error(err.message)
          })
        }
      })
    },
    // 保存数据
    edit() {
      // 验证表单数据
      this.$refs.form.validate((valid) => {
        if (valid) {
          reportApi.updateReport(this.form).then(response => {
            if (response.data) {
              this.$notify.success('保存成功')
              this.$emit('editComplete')
            } else {
              this.$notify.error(response.errors[0].message)
            }
          }).catch((err) => {
            this.$notify.error(err.message)
          })
        }
      })
    },
    close() {
      this.$emit('doClose')
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
